<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>文章编辑</title>
<meta name="description" content="这是一个form页面">
<meta name="keywords" content="form">
<% include("/common/inc/css.html"){} %>
</head>
<body>
	<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
  以获得更好的体验！</p>
<![endif]-->

	<!-- TODO 头部乱码 -->
	<% include("/common/inc/header.html"){} %>

	<div class="am-cf admin-main">
		<!-- sidebar start -->
		<div class="admin-sidebar am-offcanvas" id="admin-offcanvas">
			<div class="am-offcanvas-bar admin-offcanvas-bar">
				<ul class="am-list admin-sidebar-list">
					<li><a href="admin-index.html"><span class="am-icon-home"></span>
							首页</a></li>
					<li class="admin-parent"><a class="am-cf"
						data-am-collapse="{target: '#collapse-nav'}"><span
							class="am-icon-file"></span> 页面模块 <span
							class="am-icon-angle-right am-fr am-margin-right"></span></a>
						<ul class="am-list am-collapse admin-sidebar-sub am-in"
							id="collapse-nav">
							<li><a href="admin-user.html" class="am-cf"><span
									class="am-icon-check"></span> 个人资料<span
									class="am-icon-star am-fr am-margin-right admin-icon-yellow"></span></a></li>
							<li><a href="admin-help.html"><span
									class="am-icon-puzzle-piece"></span> 帮助页</a></li>
							<li><a href="admin-gallery.html"><span
									class="am-icon-th"></span> 相册页面<span
									class="am-badge am-badge-secondary am-margin-right am-fr">24</span></a></li>
							<li><a href="admin-log.html"><span
									class="am-icon-calendar"></span> 系统日志</a></li>
							<li><a href="admin-404.html"><span class="am-icon-bug"></span>
									404</a></li>
						</ul></li>
					<li><a href="admin-table.html"><span class="am-icon-table"></span>
							表格</a></li>
					<li><a href="admin-form.html"><span
							class="am-icon-pencil-square-o"></span> 表单</a></li>
					<li><a href="#"><span class="am-icon-sign-out"></span> 注销</a></li>
				</ul>

				<div class="am-panel am-panel-default admin-sidebar-panel">
					<div class="am-panel-bd">
						<p>
							<span class="am-icon-bookmark"></span> 公告
						</p>
						<p>时光静好，与君语；细水流年，与君同。—— Amaze UI</p>
					</div>
				</div>

				<div class="am-panel am-panel-default admin-sidebar-panel">
					<div class="am-panel-bd">
						<p>
							<span class="am-icon-tag"></span> wiki
						</p>
						<p>Welcome to the Amaze UI wiki!</p>
					</div>
				</div>
			</div>
		</div>
		<!-- sidebar end -->

		<!-- content start -->
		<div class="admin-content">
			<div class="admin-content-body">
				<div class="am-cf am-padding am-padding-bottom-0">
					<div class="am-fl am-cf">
						<strong class="am-text-primary am-text-lg">表单</strong> / <small>form</small>
					</div>
				</div>

				<hr>

				<form class="am-form" method="post">
					<div class="am-g am-margin-top">
						<div class="am-u-sm-4 am-u-md-2 am-text-right">文章标题</div>
						<div class="am-u-sm-8 am-u-md-4">
							<input type="text" class="am-input-sm" name="title"
								placeholder="输入用户名（至少 3 个字符）">
						</div>
						<div class="am-hide-sm-only am-u-md-6">*必填，不可重复</div>
					</div>

					<div class="am-g am-margin-top">
						<div class="am-u-sm-4 am-u-md-2 am-text-right">文章分类</div>
						<div class="am-u-sm-8 am-u-md-4">
							<select data-am-selected="{btnSize: 'sm'}" name="typeId">
								<option value="">请选择</option> <%for(var item in typeList) {%>
								<option value="${item.id}">${item.name}</option> <%}%>
							</select>
						</div>
						<div class="am-hide-sm-only am-u-md-6">选填</div>
					</div>

					<div class="am-g am-margin-top">
						<div class="am-u-sm-4 am-u-md-2 am-text-right">内容摘要</div>
						<div class="am-u-sm-8 am-u-md-4">
							<input type="text" class="am-input-sm" name="infoTitle">
						</div>
						<div class="am-u-sm-12 am-u-md-6">不填写则自动截取内容前255字符</div>
					</div>

					<div class="am-g am-margin-top-sm">
						<div class="am-u-sm-12 am-u-md-2 am-text-right admin-form-text">
							内容描述</div>
						<div class="am-u-sm-12 am-u-md-10">
							<script id="container" name="info" type="text/plain">
       							 
   							 </script>
						</div>
					</div>

					<div class="am-margin">
						<button id="btnSave" type="button"
							class="am-btn am-btn-primary am-btn-xs">提交保存</button>
						<button type="button" class="am-btn am-btn-primary am-btn-xs">放弃保存</button>
					</div>
				</form>

			</div>

			<footer class="admin-content-footer">
				<hr>
				<p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed
					under MIT license.</p>
			</footer>
		</div>
		<!-- content end -->

	</div>

	<a href="#"
		class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu"
		data-am-offcanvas="{target: '#admin-offcanvas'}"></a>

	<footer>
		<hr>
		<p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed under
			MIT license.</p>
	</footer>

	<% include("/common/inc/js.html"){} %>

	<!-- ajax提交表单 -->
	<script
		src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.min.js"></script>
	<!-- 配置文件 -->
	<script type="text/javascript"
		src="${ctxPath}/assets/ueditor/ueditor.config.js"></script>
	<!-- 编辑器源码文件 -->
	<script type="text/javascript"
		src="${ctxPath}/assets/ueditor/ueditor.all.js"></script>
	<!-- 实例化编辑器 -->
	<script type="text/javascript">
		var ue = UE.getEditor('container');
	</script>

	<script type="text/javascript">
		$(function() {
			//amazeui 表单验证
			// $('.am-form').validator({
			//	  submit: function() {
			/*  var formValidity = this.isFormValid();
			console.log(formValidity);
			if(formValidity == false)
			 	return false;
			return true; */
			//	 	return this.isFormValid();
			//	  }
			// 	});
			// 异步提交表单
			$("#btnSave").click(function() {
				//Jquery禁用登录按钮
				$(this).addClass("am-disabled");
				$(".am-form").ajaxSubmit({
					success : function(data) {
						$(this).removeClass("am-disabled");
						console.log(data);
						if (data.errorCode != "0") {
							alert(data.errorMsg);
							return;
						}
						//跳转页面
						window.location.href="${ctxPath}/article/save";
					}
				})
			})
		});
	</script>
</body>
</html>
